<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 凭证统计</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="__PUBLIC__/admin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="__PUBLIC__/admin/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="__PUBLIC__/admin/css/animate.css" rel="stylesheet">
    <link href="__PUBLIC__/admin/css/style.css" rel="stylesheet">

</head>
<style>
    .dd{
        font-size: 20px;
        font-weight: bold;
        margin-top: 10px;
    }
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-12">

            <div class="row">
                <div class="col-sm-12">
                    <div class="row row-sm text-center">
                        <div class="col-xs-3">
                            <div class="panel padder-v item  bg-info"  style="background-color:#00bdcc">
                                <div class="h1 text-fff font-thin h1" style="color:white"><?= $data['all_no_repay'];?></div>
                                <span class="text-muted text-xs dd" style="color:white">全部待收</span>
                                <div class="top text-right w-full">
                                    <!--<i class="fa fa-caret-down text-warning m-r-sm"></i>-->
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-3">
                            <div class="panel padder-v item bg-info"  style="background-color: #1fbba6">
                                <div class="h1 text-fff font-thin h1" style="color:white"><?= $data['all_have_repay'];?></div>
                                <span class="text-muted text-xs dd" style="color:white">已收总额</span>
                                <div class="top text-right w-full">
                                    <!--<i class="fa fa-caret-down text-warning m-r-sm"></i>-->
                                </div>
                            </div>
                        </div>

                        <div class="col-xs-3">
                            <div class="panel padder-v item  bg-info" style="background-color: #5f8295">
                                <div class="h1 text-fff font-thin h1" style="color:white"><?= $data['today_no_repay'];?></div>
                                <span class="text-muted text-xs dd" style="color:white">当天待收</span>
                                <div class="top text-right w-full">
                                    <!--<i class="fa fa-caret-down text-warning m-r-sm"></i>-->
                                </div>
                            </div>
                        </div>

                        <div class="col-xs-3">
                            <div class="panel padder-v item" style="background-color: #e66b6b">
                                <div class="h1 text-info font-thin h1" style="color:white"><?= $data['three_today_no_repay'];?></div>
                                <span class="text-muted text-xs dd" style="color:white">三天内未回款</span>
                                <div class="top text-right w-full">
                                    <!--<i class="fa fa-caret-down text-warning m-r-sm"></i>-->
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
            <input style="height: 2.5rem;" class="laydate-icon" value="<{$Think.get.time}>" placeholder=" 选择时间" id="choose_time" >


            <div class="row" style="margin-right:0">
                <div class="col-sm-12" style="padding-right:0;">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title" style="border-bottom:none;background:#fff;">
                            <h5>近7天凭证趋势图</h5>
                        </div>
                        <div class="ibox-content" style="border-top:none;">
                            <div id="user_situation" style="height:600px;width:100%">
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>

    </div>
</div>
<!-- 全局js -->
<script src="__PUBLIC__/admin/js/jquery.min.js?v=2.1.4"></script>
<!--轮播效果js-->
<script src="__PUBLIC__/admin/static/js/rollSlide.js"></script>
<script src="//cdn.bootcss.com/echarts/3.5.3/echarts.min.js"></script>
<script src="__PUBLIC__/admin/js/bootstrap.min.js?v=3.3.6"></script>
<script src="__PUBLIC__/admin/js/plugins/layer/layer.min.js"></script>
<script src="__PUBLIC__/admin/js/layui/layui.js"></script>
<script src="__PUBLIC__/admin/js/layui/lay/modules/laydate.js"></script>
<!-- Flot -->
<!-- 自定义js -->
<script src="__PUBLIC__/admin/js/content.js"></script>
<!--flotdemo-->
<script type="text/javascript">
    window.parent.close();

    $(document).ready(function(){
        layui.use('laydate', function() {
            var laydate = layui.laydate;
            var start = {
                start: '',
                choose: function (dates) {
                    layer.load();
                    window.location.href='__MODULE__/Voucher/voucher_statistics?time='+dates;
                }
            };
            document.getElementById('choose_time').onclick = function () {
                start.elem = this;
                laydate(start);
                $('#choose_time').val('');
            }
        });
    });

    var dates=new Array(),certificates=new Array(),certificate_periods=new Array();
    var myChart = echarts.init(document.getElementById('user_situation'));

    var d='<{$date}>';
    var date=eval('('+d+')');
    $(date).each(function(k,v){
        dates.push(v);
    });

    var c='<{$certificate}>';
    var certificate=eval('('+c+')');
    $(certificate).each(function(k,v){
        certificates.push(v);
    });

    var c_p='<{$certificate_period}>';
    var certificate_period=eval('('+c_p+')');
    $(certificate_period).each(function(k,v){
        certificate_periods.push(v);
    });


    option = {
        title : {
            text: '近七天凭证趋势图',
            subtext: ''
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['有效凭证数','有效延期数']
        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']},
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap: false,
                data : dates
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'有效凭证数',
                type:'line',
                data:certificates,
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            },
            {
                name:'有效延期数',
                type:'line',
                data:certificate_periods,
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            }
        ]
    };
    myChart.setOption(option);



</script>
</body>

</html>
